<script setup>
  import { useRouter } from 'vue-router';
  import { reactive, onMounted } from 'vue'
  import { getFirstNodeOfTree } from '@/utils/dataUtils'
  import { GetCalculateAuthVariety } from '@/api/calculate/formula'

  const appRouter = useRouter()

  const varietyData = reactive({
    varieties: [],
    varietyName: '',
  })

  const treeNodeClick = (node) => {
    if (!node.is_real) return
    // console.log(node)
    varietyData.varietyName = node.name
    appRouter.push({
      path: '/calculate/variety',
      name: 'calculateVariety',
      query: {
        ven: node.code
      }
    })
  }

  onMounted(() => {
    GetCalculateAuthVariety().then((res) => {
      varietyData.varieties = res.data.variety
      if (varietyData.varieties.length > 0) {
        const firstNode = getFirstNodeOfTree(varietyData.varieties)
        treeNodeClick(firstNode)
      }
    })
  })

</script>
<template>
  <div class="page-container">
    <div class="left-pane">
      <el-scrollbar>
        <el-tree
          ref="varietyTree"
          node-key="code"
          empty-text="还没有本模块品种权限"
          :data="varietyData.varieties"
          :props="{label:'name'}"
          @node-click="treeNodeClick"
        />
      </el-scrollbar>
    </div>
    <div class="right-pane">
      <div class="action-bar">
        <el-icon><Flag /></el-icon>
        <div class="box-item">{{ varietyData.varietyName }}</div>
      </div>
      <div class="view-frame">
        <el-scrollbar>
          <RouterView />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .page-container {
    display: flex;
    .left-pane {
      border: 1px solid #eeeeee;
      border-top: 0;
      border-bottom: 0;
      min-width: 258px;
      width: 258px;
      height: calc(100vh - 40px); /* 40menuBar */
      min-height: calc(100vh - 40px);
      background-color: #fff;
    }
    .right-pane {
      width: calc(#{$content-width} - 261px); /** 1pxborder-right */
      min-width: calc(#{$content-width} - 261px);
      border-right: 1px solid #eeeeee;
      // height: calc(100vh - 68px);
      // min-height: calc(100vh - 68px);
      background-color: #fff;
      .action-bar {
        height: 26px;
        line-height: 26px;
        background-color: #dce5f8;
        display: flex;
        align-items: center;
        padding-left: 10px;
        .el-icon {
          color: #ee582a;
        }
        .box-item {
          padding: 0 4px;
          color: #000;
        }
      }
      .view-frame {
        height: calc(100vh - 66px);
      }
    }
  }
</style>